<template>
  <div class="login">
    <img src="@/assets/background.png" />
    <div class="login-card">
      <p class="login-card-appname">{{ $t('common.microapp') }}</p>
      <a-input
        v-model="formState.loginname"
        :placeholder="$t('components.login.placeholder.user')"
        class="login-card-input"
      >
        <a-icon slot="prefix" type="user" style="color: rgba(0, 0, 0, 0.25)" />
      </a-input>
      <a-input
        v-model="formState.password"
        type="password"
        :placeholder="$t('components.login.placeholder.password')"
        class="login-card-input"
      >
        <a-icon slot="prefix" type="lock" style="color: rgba(0, 0, 0, 0.25)" />
      </a-input>
      <a-button
        type="primary"
        html-type="submit"
        class="login-card-button"
        @click="handleSubmit"
      >
        {{ $t('components.login.loginbutton') }}
      </a-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { setCookie } from "@/utils/util";
import { message } from "ant-design-vue";
import { ApiService } from "@/api";
import { AppService } from "@/service/app-service";
@Component
export default class Login extends Vue {
  /**
   * 表单状态数据
   *
   */
  public formState = {
    loginname: "",
    password: "",
  };

  /**
   * vue生命周期 -- mounted
   *
   */
  public mounted() {
    setTimeout(() => {
      const el = document.getElementById("app-root-loading-x");
      if (el) {
        el.style.display = "none";
      }
    }, 1000);
  }

  /**
   * 提交表单数据
   *
   */
  public async handleSubmit() {
    AppService.getInstance().clearAppData();
    const post: any = await ApiService.getInstance().Login(this.formState);
    const { status, data } = post;
    if (status == 200) {
      if (data && data.token) {
        setCookie("ibzuaa-token", data.token, 7, true);
      }
      if (data && data.user) {
        setCookie("ibzuaa-user", JSON.stringify(data.user), 7, true);
      }
      if (data && data.expirdate) {
        setCookie(
          "ibzuaa-expired",
          new Date(data.expirdate).getTime().toString(),
          7,
          true
        );
      }
      setCookie("loginname", this.formState.loginname, 7, true);
      this.$router.push("/");
    } else {
      message.error(data.message ? data?.message : this.$t('components.login.loginerror'));
    }
  }

}
</script>

<style lang="less" scoped>
.login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100%;
  background: #108cee;
  > img {
    width: 100vw;
    height: 100vh;
  }
  > .login-card {
    position: absolute;
    left: 0;
    right: 0;
    top: 20%;
    margin: auto;
    width: 450px;
    background: #fff;
    padding: 16px;
    > .login-card-appname {
      height: 30px;
      line-height: 30px;
      font-size: 20px;
      color: #666666;
      font-weight: 600;
      text-align: center;
    }
    > .login-card-input {
      width: 100%;
      margin-bottom: 24px;
    }
    > .login-card-button {
      width: 100%;
    }
  }
}
</style>